<template>
  <viewer
    :options="options"
    :images="images"
    @inited="inited"
    class="viewer"
    ref="viewer"
  >
    <template #default="scope">
      <img v-for="src in scope.images" :src="src" :key="src" />
    </template>
  </viewer>
</template>

<script>
export default {
  name: "test",
  props: {
    images: {
      type: Array,
      default: () => [
        "https://picsum.photos/200/200",
        "https://picsum.photos/300/200",
        "https://picsum.photos/250/200",
      ],
    },
  },
  data() {
    return {
      options: {
        button: false,
      },
      $viewer: null,
    };
  },
  created() {
    if (window.imgs) {
      if(Array.isArray(window.imgs)){
        this.images = window.imgs
      }else{
        this.images = window.imgs.split(",");
      }
      delete window.imgs;
    }
  },
  mounted() {
    this.show();
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
    },
    show() {
      this.$viewer.show({
        images: this.images,
        options: this.options,
      });
    },
  },
};
</script>